<template>
<div class="box">
    <hotspots-banner
    :sightName="sightName"
    :bannerImg="bannerImg"
    :bannerImgs="gallaryImgs"
    ></hotspots-banner>
    <hotspots-header></hotspots-header>
    <div class="content">
        <hotspots-list :list="list"></hotspots-list>
        <detail-int :introduceList="introduceList"></detail-int>
        <compo-nents :list="commentlist" :imgs="commentimgs" :imgs1="commentimgs1" :comshowImgs="comImgs"></compo-nents> 
    </div>
</div>
    
</template>

<script>
import HotspotsBanner from './components/Banner'
import HotspotsHeader from './components/Header'
import HotspotsList from './components/List'
import DetailInt from "./components/introduce";
import CompoNents from "./components/comment";
import axios from 'axios'
export default {    
    name:'Hotspots',
    components: {
        HotspotsBanner,
        HotspotsHeader,
        HotspotsList,
        DetailInt,
        CompoNents
    },
    data () {
        return {
            sightName:'',
            bannerImg:'',
            gallaryImgs:[],
            list:[],
            introduceList:[],
            commentlist:[],
            commentimgs:[],
            commentimgs1:[],
            comImgs:[]
        }
    },
    methods: {
        getDdtailInfo(){
            axios.get('./static/mock/Hotspots.json',{
                params:{
                    id:this.$route.params.id
                }
            }).then(this.handleGetDataSucc)
        },
        handleGetDataSucc(res){          
            res=res.data
            let id=this.$route.params.id
            if(res.ret){               
                    const data=res["data"+id]
                     this.sightName=data.sightName
                    this.bannerImg=data.bannerImg
                    this.gallaryImgs=data.gallaryImgs
                    this.list=data.categoryList
                    this.introduceList=data.introduceList
                    this.commentlist=data.commentlist
                    this.commentimgs=data.commentimgs
                    this.commentimgs1=data.commentimgs1
                    this.comImgs=data.comImgs
            }           
        }
    },
    mounted () {
        this.getDdtailInfo()
        // console.log(this.$route.params.id);
    }

    
}
</script>

<style lang="stylus" scoped>
.box{
    position relative
}
.content{
    height: auto;
    border: 1px solid white;
    border-radius: 10px;
    position: relative;
    top: -0.15rem;
   
    background: white;
    box-shadow: -2px -10px 50px black;
}

</style>
